<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '岗位详情',
    navigationStyle: 'custom',
  },
}
</route>
<template>
  <view class="job-detail">
    <view class="fixed-bg"></view>
    <view class="job-detail__container">
      <view class="job-detail__title">
        <view>{{ detailInfo.jobName }}</view>
        <text class="job-detail__title__tag">{{ detailInfo.jobType }}</text>
      </view>
      <!-- 招聘基本信息 -->
      <view class="job-detail__basic-info box">
        <view class="job-detail__basic-info__item">
          <SubTitle>招聘时间</SubTitle>
          <view class="text"
            >{{ dateFormat(detailInfo.hireBeginTime) }}-{{
              dateFormat(detailInfo.hireEndTime) || '招满为止'
            }}</view
          >
        </view>
        <view class="job-detail__basic-info__item">
          <SubTitle>工作地点</SubTitle>
          <view class="text">{{ detailInfo.cityName }}</view>
        </view>
        <view class="job-detail__basic-info__item">
          <SubTitle>学历要求</SubTitle>
          <view class="flex flex-wrap gap-1" v-if="detailInfo.minEducation">
            <c-tag v-for="el in detailInfo.minEducation.split(',')" :key="el" :text="el" />
          </view>
        </view>
        <view class="job-detail__basic-info__item">
          <SubTitle>专业要求</SubTitle>
          <view class="flex flex-wrap gap-1" v-if="detailInfo.majorName">
            <c-tag
              v-for="el in detailInfo.majorName.split(',')"
              :key="el"
              :text="el"
              type="default"
            />
          </view>
        </view>
        <view class="job-detail__basic-info__item">
          <SubTitle>届别要求</SubTitle>
          <view class="flex flex-wrap gap-1" v-if="detailInfo.classRequirements">
            <c-tag
              v-for="el in detailInfo.classRequirements.split(',')"
              :key="el"
              :text="el"
              type="green"
            />
          </view>
        </view>
      </view>

      <!-- 岗位要求 -->
      <view class="box">
        <view class="job-detail__basic-info__item">
          <SubTitle>岗位要求</SubTitle>
          <view class="text" :style="{ height: actualHeight }">
            <c-parse id="demandContent" :content="detailInfo.jobDetail" />
          </view>
          <view class="show-more" v-if="showMore" @click="toggleHeight"
            >查看更多 <wd-icon name="arrow-down" size="28rpx" color="#FF800E"></wd-icon
          ></view>
        </view>
      </view>
      <view class="box job-detail__company-info">
        <view class="job-detail__company-info__name">
          <image :src="companyInfo.logoUrl" mode="scaleToFill" />
          <view class="job-detail__company-info__name--text">
            <text>{{ companyInfo.companyName }}</text>
            <view class="flex gap-1 flex-wrap mt-2" v-if="companyInfo.companyNature">
              <c-tag
                v-for="el in companyInfo.companyNature.split(',')"
                :key="el"
                :text="el"
                type="blue"
                border
              ></c-tag>
            </view>
          </view>
        </view>
        <view class="job-detail__company-info__desc">
          <c-parse :content="companyInfo.companyProfile" />
        </view>
      </view>
    </view>
    <view class="job-detail__footer">
      <view class="job-detail__footer__left">
        <button class="item" open-type="share">
          <image src="@/pages-sub/static/jobDetail/share.png" mode="scaleToFill" />
          <text>分享</text>
        </button>
        <view class="item" @click="toggleCollection">
          <image :src="isCollection ? starFillIcon : starIcon" mode="scaleToFill" />
          <text>收藏</text>
        </view>
        <view class="item" @click="toFeedback">
          <image src="@/pages-sub/static/jobDetail/message.png" mode="scaleToFill" />
          <text>反馈</text>
        </view>
      </view>
      <c-button size="medium" @click="copyLink">复制投递链接</c-button>
    </view>
  </view>
</template>

<script lang="ts" setup>
  import SubTitle from './components/subTitle.vue';
  import { navigateTo } from '@/utils/router';
  import { ApiJobDetail, ApiCompanyDetail } from '@/service/job';
  import {
    ApiGetJobCollectionStatus,
    ApiCreateCollection,
    ApiCancelCollection,
  } from '@/service/collection';
  import { dateFormat } from '@/utils';
  import starIcon from '@/pages-sub/static/jobDetail/star.png';
  import starFillIcon from '@/pages-sub/static/jobDetail/star-filled.png';
  import { useUserStore } from '@/store/user';
  import { storeToRefs } from 'pinia';
  import { getCurrentInstance } from 'vue';

  const instance = getCurrentInstance();

  const detailInfo = ref<any>({});
  const companyInfo = ref<any>({});
  const isCollection = ref<boolean>(false);
  const userStore = useUserStore();
  const { userInfo } = storeToRefs(userStore);
  const actualHeight = ref<number | string>('500rpx');

  const showMore = ref(false);
  const toFeedback = () => {
    navigateTo('/pages-sub/jobDetail/feedback', { id: detailInfo.value.id });
  };
  const toggleHeight = () => {
    showMore.value = !showMore.value;
    actualHeight.value = showMore.value ? 'fit-content' : '500rpx';
  };

  const getCollectionStatus = async () => {
    const res = await ApiGetJobCollectionStatus({
      jobId: detailInfo.value.id,
    });
    isCollection.value = res.data as boolean;
  };

  const toggleCollection = async () => {
    if (isCollection.value) {
      ApiCancelCollection({
        jobId: detailInfo.value.id,
      }).then(() => {
        uni.showToast({
          title: '取消收藏成功',
          icon: 'success',
        });
        isCollection.value = false;
      });
    } else {
      ApiCreateCollection({
        jobId: detailInfo.value.id,
        userId: userInfo.value.id,
      }).then(() => {
        uni.showToast({
          title: '收藏成功',
          icon: 'success',
        });
        isCollection.value = true;
      });
    }
  };

  const copyLink = () => {
    uni.setClipboardData({
      data: detailInfo.value.url,
      success: () => {
        uni.showToast({
          title: '复制成功\r\n请前往浏览器打开',
          icon: 'none',
        });
      },
    });
  };

  onShareAppMessage(() => {
    return {
      title: detailInfo.value.jobName,
      path: `/pages-sub/jobDetail/index?params=${JSON.stringify({ id: detailInfo.value.id })}`,
    };
  });

  onLoad(async ({ params }) => {
    if (params) {
      params = JSON.parse(params);
      const res = await ApiJobDetail(params.id);
      detailInfo.value = res.data;
      ApiCompanyDetail(res.data.companyId).then(({ data }) => {
        companyInfo.value = data;
      });
      getCollectionStatus();
    }
  });
  onMounted(() => {
    nextTick(() => {
      uni
        .createSelectorQuery()
        .in(instance.proxy)
        .select('#demandContent')
        .boundingClientRect((data) => {
          showMore.value = data.height > 250;
          actualHeight.value = data.height > 250 ? '500rpx' : 'fit-content';
        })
        .exec();
    });
  });
</script>

<style lang="scss" scoped>
  .job-detail {
    display: flex;
    flex-direction: column;
    height: 100%;
    .fixed-bg {
      background: linear-gradient(180deg, #ffdbc6 0%, #fbe1d1 27%, #fff3ec 100%);
    }
    &__container {
      padding: 32rpx;
      flex: 1 0 0;
      overflow-y: auto;
    }
    &__title {
      view {
        font-weight: 600;
        font-size: 48rpx;
        color: #2e0f06;
        margin-bottom: 26rpx;
      }
      &__tag {
        font-size: 24rpx;
        background: linear-gradient(138deg, #fd771a 0%, #fea625 100%);
        border-radius: 8rpx;
        color: #fff;
        padding: 6rpx 12rpx;
      }
    }
    .box {
      padding: 32rpx;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0.7) 100%),
        #fefefe;
      border-radius: 20rpx;
      margin-top: 32rpx;
    }
    &__basic-info__item {
      &:not(:last-child) {
        margin-bottom: 32rpx;
      }

      & > .text {
        color: $uni-color-title;
        font-size: 28rpx;
        opacity: 0.5;
      }
      .show-more {
        color: $uni-color-primary;
        opacity: 1;
        font-size: 28rpx;
        display: flex;
        align-items: center;
      }
      & > view {
        margin-top: 12rpx;
      }
    }
    &__company-info {
      &__name {
        display: flex;
        align-items: center;
        image {
          width: 112rpx;
          height: 112rpx;
          border: 1rpx solid rgba(0, 0, 0, 0.06);
          border-radius: 16rpx;
        }
        &--text {
          margin-left: 24rpx;
          & > text {
            font-size: 32rpx;
            color: $uni-color-title;
          }
        }
      }
      &__desc {
        font-size: 28rpx;
        color: $uni-color-title;
        opacity: 0.5;
        margin-top: 32rpx;
      }
    }
    &__footer {
      flex-shrink: 0;
      display: flex;
      padding: 20rpx 32rpx 68rpx;
      background: #fff;
      align-items: center;
      gap: 34rpx;

      &__left {
        flex: 1 0 0;
        display: flex;
        justify-content: space-evenly;
        button {
          padding: 0;
          background: transparent;
          margin: 0;
          line-height: 1.5;
        }
        .item {
          display: flex;
          flex-direction: column;
          align-items: center;
          font-size: 24rpx;
          color: #3e4654;
          gap: 8rpx;

          image {
            width: 40rpx;
            height: 40rpx;
          }
        }
      }
    }
  }
</style>
